<template>
  <div id="role">
    <a-layout-header>
      <a-form layout="inline" :form="form" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_search.png" alt="">
          <span>筛选</span>
        </a-form-item>
        <a-form-item>
          <a-input placeholder="名称/编号" v-model="pagination.blurry" @keyup.enter="getRolesList"></a-input>
        </a-form-item>
        <a-form-item class="fright">
          <a-button icon="search" class="search_btn" @click="getRolesList">搜索</a-button>
        </a-form-item>
        <a-form-item class="fright">
          <a-button icon="sync" class="search_btn" @click="initPage">重置</a-button>
        </a-form-item>
      </a-form>
      <a-form layout="inline" class="search_top">
        <a-form-item>
          <img class="table_search" src="../../assets/image/icon/table_list.png" alt="">
          <span>账号列表</span>
        </a-form-item>
        <a-form-item class="fright">
          <!-- <a-button type="primary" icon="plus" v-permission:role="['roleAdd']" @click="addUser">新增</a-button> -->
          <a-button type="primary" icon="plus" @click="addUser">新增</a-button>
        </a-form-item>
      </a-form>
    </a-layout-header>
    <a-layout-content>
      <!-- <a-card title="角色列表" :bordered="true" type="inner"> -->
      <a-table
        :columns="columns"
        :dataSource="dataTable"
        :rowKey="record => record.id"
        :loading="loading"
        :pagination="false"
        bordered>
        <template slot="action" slot-scope="text, record">
          <!-- <a-tag color="#933dfe" v-permission:role="['roleUpdate']" @click="getRolesMenusList(record.id)">编辑</a-tag> -->
          <a-tag color="#933dfe" @click="getRolesMenusList(record.id)">编辑</a-tag>
          <a-tag color="#f50" v-if="record.userNumber<=0" @click="deleteUser(record)">删除</a-tag>
          <a-tooltip v-else title="无法删除">
            <a-tag>删除</a-tag>
          </a-tooltip>
          <!-- <a-tag color="#f50" v-permission:role="['roleDelete']" @click="deleteUser(record)">删除</a-tag> -->
        </template>
      </a-table>
    </a-layout-content>
    <edit-menu
      :id="id"
      :drawerVisible="drawerVisible"
      :title="title"
      :confirmLoading="confirmLoading"
      @onClose="drawerClose"
      @addAction="addAction"
    />
  </div>
</template>

<script>
import * as API from "../../api/role";
import editMenu from "./commponent/editMenu.vue";

export default {
  name: "roles",
  components: {
    editMenu
  },
  data() {
    return {
      form: this.$form.createForm(this),
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        blurry: null
      },
      drawerVisible: false,
      confirmLoading: false,
      title: "新增",
      loading: false,
      roleId: null, // 弹出框id
      id: undefined, // 抽屉id
      columns: [
        {
          title: "角色ID",
          dataIndex: "id",
          width: "15%",
          align: "center",
          scopedSlots: { customRender: "id" }
        },
        {
          title: "角色名称",
          dataIndex: "name",
          width: "15%",
          align: "center",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "角色描述",
          dataIndex: "description",
          width: "9%",
          align: "center",
          scopedSlots: { customRender: "description" }
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          width: "11%",
          align: "center",
          scopedSlots: { customRender: "createTime" }
        },
        {
          title: "操作",
          dataIndex: "action",
          width: "15%",
          align: "center",
          scopedSlots: { customRender: "action" }
        }
      ],
      dataTable: []
    };
  },
  mounted() {
    this.getRolesList();
  },
  activated() {},
  methods: {
    getRolesList() {
      // 角色列表
      this.loading = true;
      API.getRoles(this.pagination).then(res => {
        if (res.code === 200) {
          this.dataTable = res.data.records;
        }
        this.loading = false;
      });
    },
    getRolesMenusList(id) {
      this.title = "编辑"
      this.id = id;
      this.drawerVisible = true;
    },
    // save(checkedKeys) {
    //   API.putRolesMenus(this.id, checkedKeys).then(res => {
    //     if (res.code === 200) {
    //       this.$message.destroy();
    //       this.$message.success("操作成功");
    //       this.drawerVisible = false;
    //       this.getRolesList();
    //       this.getMenusList()
    //       this.id=null
    //     }
    //   });
    // },
    // getMenusList() {
    //   // 更新菜单路由信息
    //   API.getMenus().then(res => {
    //     if (res.code === 200) {
    //       this.$store.dispatch("updateSup", res.data);
    //     }
    //   });
    // },
    // editRoleAction(record) {
    //   // debugger
    //   // console.log(record)
    //   this.title = "编辑";
    //   this.visible = true;
    //   this.roleId = record.id
    // },
    initPage() {
      this.pagination.blurry = null;
      this.roleId = null;
      // this.postRoleDataMock.name = null;
      this.getRolesList();
    },
    deleteUser(record) {
      let that = this;
      this.$confirm({
        okText: "确定",
        cancelText: "取消",
        title: "",
        content: "确定删除该角色？",
        onOk() {
          let arr = []
          arr.push(record.id)
          API.delUser(arr).then(res => {
            if (res.code === 200) {
              that.$message.destroy();
              that.$message.success("删除成功");
              that.getRolesList();
            }
          });
        },
        onCancel() {}
      });
    },
    addUser() {
      this.title = "新增";
      this.id = null;
      this.drawerVisible = true;
    },
    addAction(submitData) {
      this.confirmLoading = true;
      this.id
        ? this.editRoleSubmit(submitData)
        : this.addRoleSubmit(submitData);
    },
    addRoleSubmit(submitData) {
      submitData.menusId = submitData.menuTree.map(item => item.nodeId)
      API.addRoles(submitData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("角色添加成功");
          this.getRolesList();
          this.drawerVisible = false
          this.id = null
        }
        this.confirmLoading = false;  
      }).catch(()=>{
        this.confirmLoading = false;
      })
    },
    editRoleSubmit(submitData) {
      // let menusId = submitData.menuTree.map(item => item.nodeId)
      submitData.menusId = submitData.menuTree.map(item => item.nodeId)
      API.editRoles(this.id, submitData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("角色修改成功");
          this.getRolesList();
          this.drawerVisible = false
          this.id = null
        }
        this.confirmLoading = false;
      }).catch(()=>{
        this.confirmLoading = false;
      })
    },
    drawerClose () {
      this.drawerVisible=false
      this.id = undefined
    }
  }
};
</script>

